<template>
  <div>
    <h1>work</h1>
    <div>
      <table border='1'>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in arr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.goods_name }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </table>
      <div>
        <button v-for="(item,index) in but" :key="index" @click="Pagination(item)" >{{ item }}</button>
      </div>
    </div>
  </div>
</template>
<script>
  // 导入组件
  import axios from 'axios';
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        but:[1],
        arr:[],
        Pagination_Parameter:1
       }
     },
     // 实例方法
     methods: {
        //渲染
        fn(){
            // axios({
            //     url:'https://liu.zzgoodqc.cn/goodsx/goodslist',
            //     method:'get'
            // })
            // .then(res=>{
            //     this.arr=res.data.data
            //     console.log(this.arr);

            // })
            // .catch(err=>{
            //     console.log(err);
            // })



                 //分页渲染
            axios({
                url:`https://liu.zzgoodqc.cn/goodsx/listByPage?page=${this.Pagination_Parameter}&limit=${3}`,
                method:'get'
            })
            .then(res=>{
                this.but=[]
                for(let i=1;i<=Math.ceil(res.data.count/3);i++){
                    this.but.push(i)
                }
                this.arr=res.data.data
            })
            .catch(err=>{
                console.log(err);
            })
        },

        Pagination(item){
            this.Pagination_Parameter=item
            this.fn()
        }
     },
     // 计算属性
     computed: {
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
    },
    // 挂载后（既能访问数据，也能操作dom）
    mounted () {
         this.fn()
     },
     // 过滤器
     filters: {
     }
  }
</script>
<style lang="less" scoped>

</style>
